// 2025.03.17 17:52 星期一 晴 无事 昨天 给他骂了 前天说我 豆腐买多了 贱货

import { toStringTypeCheck } from '../../../../Func/uniFunc/Func';
import { endsTimeAnimation } from '../../../../Func/uniFunc/Func/endsTimeAnimation';
import { settimeNth } from '../../../../Func/uniFunc/Func/setNthTime';
import { add_class, remove_class } from '../../../class_operate/Func';
import { create_staticCssTxt_mana } from '../../../css/setStaticCsstxt';
import { fromToAnima_cssObj } from '../../../fromToAnima/classes/cla_fromToAnima_cssObj';
import { fromToAnima_keyframeObj } from '../../../fromToAnima/classes/cla_fromToAnima_keyframeObj';
import { getElementViewOffsetPosi } from '../../getElementViewOffsetPosi';

const disappearDom_anima_class_prefix = 'disappearDom_anima_class_';

const appearDom_anima_class_prefix = 'appearDom_anima_class_';

const staticCss_id_prefix = 'static_disappear_id_';

const Multiply_act = {
  vertical: [1, 0],
  level: [0, 1],
  both: [0, 0],
};

/**
 * css var 动态 top left 样式
 */
const StaticCss_disappear = create_staticCssTxt_mana('disappearDom');

/**
 * css var 动态 top left 样式
 */
const StaticCss_appear = create_staticCssTxt_mana('appearDom');

/**
 * 消失 disEl 的 动画 class 名
 */
let disappearEl_anima_cla;

/**
 * 显示 disEl 的 动画 class 名
 */
let appearEl_anima_cla;

/**
 * 应用 当前 元素 消失 动画
 * @param {HTMLElement | HTMLElement[]} element
 * @param {appear_Direct} direct 指定方位 收缩
 * @param {function} afterCb 动画 完成 后续 操作
 */
function disappearElFunc(element, direct = 'vertical', afterCb) {
  if (toStringTypeCheck(element, 'array')) {
    let uniEl;
    for (let i = 0; i <= element.length - 1; i++) {
      uniEl = element[i];
      if (i == element.length - 1) {
        disappearElFunc(uniEl, direct, afterCb);
      } else {
        disappearElFunc(uniEl, direct);
      }
    }
    return;
  }

  let target_id = element.id;

  // let parentEl = element.parentElement;

  // let nextEl = element.nextElementSibling;

  disappearEl_anima_cla = disappearDom_anima_class_prefix + target_id;

  // // 创建 元素
  // let disEl = newCreateDisappearBody(target_id);

  let cssStr = newCreateCss(element, direct);

  // 创建 对应消失 方向的 css
  StaticCss_disappear.setStaticCssTxt(staticCss_id_prefix + target_id, cssStr);

  // // 装载 消失 元素 到 当前元素 位置
  // packNode(parentEl, disEl, true, nextEl);

  // // 将当前元素 装载到 消失元素 中
  // packNode(disEl, element);

  // 应用动画
  requestAnimationFrame(() => {
    let delay = endsTimeAnimation(element, disappearEl_anima_cla);
    settimeNth(delay, () => {
      add_class(element, 'disnone');
      if (afterCb instanceof Function) {
        afterCb();
      }

      // // 放回原来位置
      // packNode(parentEl, element, true, disEl);
      // disEl.remove();
    });
  });
}

// /**
//  * 创建 一个 新的 空白元素
//  * @param {string} target_id 指定元素 id
//  * @returns {HTMLElement}
//  */
// function newCreateDisappearBody(target_id) {
//   let disappearDomT = {
//     tag: 'div',
//     props: ['id'],
//     id: disappearDom_id_prefix + target_id,
//   };

//   return domTree(disappearDomT);
// }

/**
 *
 * @param {HTMLElement} element
 * @param {Direct} direct 指定方位 收缩
 */
function newCreateCss(element, direct) {
  let curEl_posi = getElementViewOffsetPosi(element);
  // 最大 长度
  let maxWidth = curEl_posi.width;
  // 最大 高度
  let maxHeight = curEl_posi.height;

  let cur_animation_obj = new fromToAnima_cssObj();

  cur_animation_obj.name = disappearEl_anima_cla;

  let curEl_style_obj = new fromToAnima_keyframeObj(element);

  let Multiply_act_direct = Multiply_act[direct];

  let ret = `
.${cur_animation_obj.name} {
    animation-name: ${cur_animation_obj.keyframeName};
    animation-duration: ${cur_animation_obj.duration}s;
    // animation-duration: 6s;

    animation-delay: ${cur_animation_obj.delay}s;
    animation-timing-function: ${cur_animation_obj.timing_function};
    animation-fill-mode: ${cur_animation_obj.fill_mode};

    ${curEl_style_obj.toStringStyle()}
}

@keyframes ${cur_animation_obj.keyframeName}{
    0%{
        width: ${maxWidth}px;
        height: ${maxHeight}px;
        opcity: 1;
    }
    
    60%{
        width: ${Multiply_act_direct[0] * maxWidth * 0.6}px;
        height: ${Multiply_act_direct[1] * maxHeight * 0.6}px;
        opcity: 0;
    }

    100%{
        width: ${Multiply_act_direct[0] * maxWidth}px;
        height: ${Multiply_act_direct[1] * maxHeight}px;
        opcity: 0;
    }
}`;

  // console.log(ret);

  return ret;
}

/**
 * 应用 当前 元素 消失 动画
 * @param {HTMLElement | HTMLElement[]} element
 * @param {appear_Direct} direct 指定方位 收缩
 */
function appearElFunc(element, direct = 'vertical', afterCb) {
  if (toStringTypeCheck(element, 'array')) {
    for (const uniEl of element) {
      appearElFunc(uniEl, direct, afterCb);
    }
    return;
  }

  let target_id = element.id;

  // let parentEl = element.parentElement;

  // let nextEl = element.nextElementSibling;

  appearEl_anima_cla = appearDom_anima_class_prefix + target_id;

  // // 创建 元素
  // let disEl = newCreateDisappearBody(target_id);

  let cssStr = newCreateCss_appear(element, direct);

  // 创建 对应消失 方向的 css
  StaticCss_appear.setStaticCssTxt(staticCss_id_prefix + target_id, cssStr);

  // // 装载 消失 元素 到 当前元素 位置
  // packNode(parentEl, disEl, true, nextEl);

  // // 将当前元素 装载到 消失元素 中
  // packNode(disEl, element);

  // 应用动画
  requestAnimationFrame(() => {
    // 显示元素
    remove_class(element, 'disnone');
    let delay = endsTimeAnimation(element, appearEl_anima_cla);
    settimeNth(delay, () => {
      if (afterCb instanceof Function) {
        afterCb();
      }

      // // 放回原来位置
      // packNode(parentEl, element, true, disEl);

      // disEl.remove();
    });
  });
}

/**
 *
 * @param {HTMLElement} element
 * @param {*} direct
 * @returns
 */
function newCreateCss_appear(element, direct) {
  remove_class(element, 'disnone');
  let curEl_posi = getElementViewOffsetPosi(element);
  // console.log(curEl_posi);

  // 最大 长度
  let maxWidth = curEl_posi.width;

  // 最大 高度
  let maxHeight = curEl_posi.height;

  let cur_animation_obj = new fromToAnima_cssObj();

  cur_animation_obj.name = appearEl_anima_cla;

  let curEl_style_obj = new fromToAnima_keyframeObj(element);

  add_class(element, 'disnone');

  let Multiply_act_direct = Multiply_act[direct];

  let ret = `
.${cur_animation_obj.name} {
    animation-name: ${cur_animation_obj.keyframeName};
    animation-duration: ${cur_animation_obj.duration}s;
    // animation-duration: 6s;

    animation-delay: ${cur_animation_obj.delay}s;
    animation-timing-function: ${cur_animation_obj.timing_function};
    animation-fill-mode: ${cur_animation_obj.fill_mode};

    ${curEl_style_obj.toStringStyle()}
}

@keyframes ${cur_animation_obj.keyframeName}{
    0%{
        width: ${Multiply_act_direct[0] * maxWidth}px;
        height: ${Multiply_act_direct[1] * maxHeight}px;
        opcity: 0;
    }
    
    40%{
        width: ${Multiply_act_direct[0] * maxWidth * 0.4}px;
        height: ${Multiply_act_direct[1] * maxHeight * 0.4}px;
        opcity: 0;
    }

    100%{
        width: ${maxWidth}px;
        height: ${maxHeight}px;
        opcity: 1;
    }
}`;

  console.log(ret);

  return ret;
}
export { disappearElFunc, appearElFunc };
